<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录后台系统</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" value="admin" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" value="123456" v-model="form.password" show-password/>
      </el-form-item>
      <el-form-item label="验证码" style="height: 40px;margin-bottom: 20px;" prop="vCode">
        <el-input class="input" maxlength="8" placeholder="请输入验证码" style="width: 120px" v-model="form.vCode"></el-input>
        <div class="divIdentifyingCode"  @click="generatedCode()">
          <img id="imgIdentifyingCode" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" style="height:40px; width: 102px; cursor: pointer;"/>
          <span style="position: absolute; top: 0; left: 18px;cursor: pointer; font-size: 20px">{{form.Code}}</span>
          </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>您的输入不能为空</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible1"
      width="30%">
      <span>账号或密码错误</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible2"
      width="30%">
      <span>验证码错误</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {requestPost} from "../network/request";
  import store from "../store";

  export default {
    name: "Login",
    data() {
      return {
        form: {
          Code: '',
          vCode: '',
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ],
          vCode: [
            {required: true, message: '验证码不为空', trigger: 'blur'},
          ]
        },
        // 对话框显示和隐藏
        dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
      }
    },
    mounted() {
      this.generatedCode()
    },
    methods: {
      generatedCode () {
        const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
        let code = ''
        for (let i = 0; i < 4; i++) {
          let index = Math.floor(Math.random() * 62)
          code += random[index]
        }
        this.form.Code = code
      },

      onSubmit(formName) {
        let vCode = this.form.vCode.toUpperCase();
        let Code = this.form.Code.toUpperCase();
        this.$store.commit('login',true);
        console.log(this.$store.state.count)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(vCode==Code&&this.$store.state.count){
              this.$router.replace("/main/"+this.form.username);
            }else if(vCode!=Code){
              this.dialogVisible2 = true;
              return false;
            }else if(!this.$store.state.count){
              this.dialogVisible1 = true;
              return false
            }
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  .divIdentifyingCode {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 102px; /*设置图片显示的宽*/
    height: 40px; /*图片显示的高*/
    background: #e2e2e2;
    margin: 0;
  }
</style>
